<script setup lang="ts">
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { delCate, getCateList } from '@/api/cate';
import { onMounted, ref } from 'vue';
import type { Cate } from '@/types'
import ArticleEdit from './components/ArticleEdit.vue';
import DialogTips from '@/components/DialogTips.vue';
import { ElMessage } from 'element-plus';
const cateList = ref<Cate[]>([])
const queryCateList = async () => {
  const result = await getCateList()
  cateList.value = result
}
onMounted(() => {
  queryCateList()
})
const articleEditOpen = ref()
const dialogTipsOpen = ref()
const handleEdit = (cate: Cate) => {
  articleEditOpen.value.open(cate)

}
const handleDelete = (id: number) => {
  dialogTipsOpen.value.open(id)
}
const confirmDelete = (id: number) => {
  delCate(id)
  queryCateList()
  ElMessage.success("删除成功")
}
</script>
<template>
  <div class="main">
    <div class="article">
      <span>文章分类</span>
      <el-button type="primary" @click="articleEditOpen.open()">添加分类</el-button>
    </div>
    <el-table :data="cateList" style="width: 100%">
      <el-table-column prop="id" label="序号" min-width="15%" />
      <el-table-column prop="cate_name" label="分类名称" min-width="25%" />
      <el-table-column prop="cate_alias" label="分类别名" min-width="20%" />
      <el-table-column label="操作" min-width="40%">
        <template #default="scope">
          <el-button type="primary" plain :icon="Edit" circle @click="handleEdit(scope.row)" />
          <el-button type="danger" plain :icon="Delete" circle @click="handleDelete(scope.row.id)" />
        </template>
      </el-table-column>
      <!-- 空数据自定义 -->
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
  </div>
  <ArticleEdit @success="queryCateList" ref="articleEditOpen"></ArticleEdit>
  <DialogTips @confirm="confirmDelete" ref="dialogTipsOpen"></DialogTips>
</template>

<style scoped>
.main {

  .article {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-border-color);
  }

  .searchForm {
    margin-top: 20px;
    height: 50px;

    .search-select {
      width: 200px;
    }
  }

}
</style>
